@extends('layouts.back_stage')
@section('content')
     <!-- <link rel="stylesheet" href="{{env('CDN_DOMAIN_NAME')}}/store/commoncss/element-2.4.1.css">
    <script src="{{env('CDN_DOMAIN_NAME')}}/store/commonjs/vue.js?v0.0.3"></script>
    <script src="{{env('CDN_DOMAIN_NAME')}}/store/commonjs/element-2.4.1.js"></script> -->
    <style>
    [v-cloak] {display: none;}
    </style>
    <div class="container">
        <div class="row">
            <div style="padding: 20px;">
                <h3 >添加权限分配</h3>
            </div>
            <div class="col-md-12">
                <div id="app" v-cloak>
                    <el-row style="padding: 20px;background-color: #fff;">
                        <div class="form-group" style="overflow: hidden;">
                        &nbsp;&nbsp;&nbsp;   所属机构： 
                       <el-cascader style="width:300px;margin:0 0 20px 0" :options="companyList" v-model="company_id" :change-on-select="true" size="small"></el-cascader>
                           <br>
                           &nbsp;&nbsp;&nbsp;   所在部门: &nbsp;  
                            <el-select  size="small" v-model="type" style="width:300px;margin:0 0 20px 0" class="ingred_sel" @focus="typeFocus" @change="typeValue">
                                <el-option  v-for="(item,index) in bumen" :key="item.index" :value="item.id" :label="item.department"> @{{item.department}}</el-option>
                            </el-select>
                            <div>
                                &nbsp;&nbsp;&nbsp;   部门职位： 
                                <el-select v-model="position" placeholder="请选择"  style="width:300px;margin:0 0 20px 0" size="small">
                                    <el-option label="总经理" value="1"></el-option>
                                    <el-option label="员工" value="0"></el-option>
                                </el-select>
                            </div>
                              &nbsp;&nbsp;&nbsp;  角色名： &nbsp;   
                            <el-input v-model="role_name"  style="width:300px;margin:0 0 20px 0" size="small"  maxlength="10" placeholder="请输入角色名" size="small"></el-input>
                            <el-button type="primary" @click="maxAllChoose" size="small">一键全选</el-button>
                            <el-button type="primary" @click="save" size="small" style="float:right">添加</el-button>
                        </div>
                        <el-collapse v-model="activeNames" size="small">
                        <el-collapse-item v-for="(item,index) in data" :title="item.name" :name="item.id" :key="item.id">
                            <el-card class="box-card" v-for="page in item.child" :key="page.name" style="margin-bottom:15px;">
                                <div slot="header" class="clearfix">
                                    <span>@{{ page.name }}</span>
                                    <el-checkbox style="float: right; padding: 3px 0" v-model="page.allChoose" @change="midAllChoose(page);checkMax(item)">全选</el-checkbox>
                                </div>
                                <div class="text item">
                                    <el-checkbox-group v-model="checkList">
                                        <el-checkbox @change="addFatherNode(item.id,page.id,box.id,page,item)" v-for="box in page.child" :label="box.id" :key="box.id">@{{ box.name }}</el-checkbox>
                                    </el-checkbox-group>
                                </div>
                            </el-card>
                        </el-collapse-item>
                      </el-collapse>
                    </el-row>
                </div>
            </div>
        </div>
        <script>
            var app = new Vue({
            el:'#app',
            data() {
                return {
                    data:[],
                    companyList:[],
                    company_id:[],
                    type:'',
                    bumen:[],
                    companyId:'',
                    activeNames:[],
                    checkList:[],
                    maxAll:false,
                    role_name:'',
                    role_name_list:[],
                    department:'',
                    position:'',
                    companyId:"",
                    company_id:[],
                    companyList:[],
                }
            },
            methods: {
                typeFocus(){
                    let that=this
                     if(this.company_id==''){
                        this.$notify.error({
                            title: '提示',
                            message: '请选择所属机构',
                        });
                        return false;
                     }
                     this.companyId=this.company_id[this.company_id.length-1]
                 $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content'),
                        'contentType':'application/json'
                    },
                    url: `/departments/getall?id=${this.companyId}`,
                    type: 'get',
                    dataType: 'json',
                    success:res=>{
                        console.log(res)
                       that.bumen=res.content
                      }
                    })
                },
                typeValue(val){

                },
                getCompanyList(){
                    let that=this
                    let list=[]
                    $.ajax({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content'),
                            'contentType':'application/json'
                        },
                        url: '/clients/getall',
                        type: 'get',
                        dataType: 'json',
                        success:res=>{
                            if(res.result.success){
                                for(let value of res.content[1]){
                                    value['value'] = value.id
                                    value['label'] = value.company_name
                                    let child_data = res.content[1].filter((n) => n.pid == value.id && n.id != value.id)
                                    if(child_data.length > 0){
                                        value['children'] = child_data
                                    }
                                }
                                this.companyList = res.content[1].filter((n) => n.id == res.content[0])
                            }else{
                                this.$notify.error({
                                    title: '错误',
                                    message: res.result.errorMsg
                                })
                            }
                        }
                    })
                },
                checkMax(max){
                    let self = this
                    let max_lock = 0
                    for(mid in max.child){
                        if(this.checkList.indexOf(max.child[mid].id) != -1){
                            if(this.checkList.indexOf(max.id) == -1){
                                this.checkList.push(max.id)
                            }
                            return false
                        }else{
                            this.checkList = this.checkList.filter(o =>  o != max.id)
                        }
                    }
                },
                maxAllChoose(){
                    let self = this
                    if(self.maxAll == false){
                        self.data.forEach(value => {
                            if(self.checkList.indexOf(value.id) == -1){
                                self.checkList.push(value.id)
                            }
                            for(mid in value.child){
                                value.child[mid].allChoose = true
                                if(this.checkList.indexOf(mid) == -1){
                                    this.checkList.push(value.child[mid].id)
                                }
                                self.midAllChoose(value.child[mid])
                            }
                        })
                        self.maxAll = true
                    }else{
                        self.data.forEach(value => {
                            for(mid in value.child){
                                value.child[mid].allChoose = false
                                self.checkList = []
                            }
                        })
                        self.maxAll = false
                    }
                },
                midAllChoose(item){
                    if(item.allChoose == true){
                        for(value in item.child){
                            if(this.checkList.indexOf(item.child[value].id) == -1){
                                this.checkList.push(item.child[value].id)
                            }
                        }
                        if(this.checkList.indexOf(item.id) == -1){
                            this.checkList.push(item.id)
                        }
                    }else{
                        for(value in item.child){
                            if(this.checkList.indexOf(item.child[value].id) != -1){
                                this.checkList = this.checkList.filter(o =>  o != item.child[value].id)
                            }
                        }
                        this.checkList = this.checkList.filter(o => o != item.id)
                    }
                },
                addFatherNode(max,mid,min,mid_arr,max_arr){
                    if(this.checkList.indexOf(max) == -1){
                        this.checkList.push(max)
                    }
                    if(this.checkList.indexOf(mid) == -1){
                        this.checkList.push(mid)
                    }
                    let min_lock = 0
                    let min_len = 0
                    for(value in mid_arr.child){
                        if(this.checkList.indexOf(mid_arr.child[value].id) != -1){
                            min_lock++
                        }
                        min_len++
                    }
                    if(min_lock == min_len){
                        mid_arr.allChoose = true
                    }else{
                        mid_arr.allChoose = false
                    }
                    if(min_lock == 0){
                        this.checkList = this.checkList.filter(o =>  o != mid)
                    }
                    this.checkMax(max_arr)
                },
                roleName(){
                    let self = this
                    $.ajax({
                        headers: {'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                        url: '/role/role_list',
                        type: 'get',
                        data: {
                        },
                        dataType: 'json',
                        success: function(res) {
                            if(res.result.success == true){
                                let option = []
                                for(let value of res.content){
                                    option.push({"label":value.rolename,"value":value.id})
                                }
                                self.role_name_list = option
                            }else{

                            }
                        },
                        error: function() {
                        }
                    });
                },
                getNode(){
                    let self = this
                    $.ajax({
                        headers: {'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                        url: '/role/nodeInfo',
                        type: 'get',
                        data: {
                        },
                        dataType: 'json',
                        success: function(res) {
                            if(res.result.success == true){
                                let menu_option = []
                                res.content.menus.forEach(element => {
                                    let page_option = []
                                    let pages_data = res.content.pages
                                    for(var value in pages_data){
                                        if(value == element.id){
                                            let item_option = []
                                            for(let item_pages of pages_data[value]){
                                                let funs_data = res.content.funs
                                                let item_chilld = []
                                                for(let funs in funs_data){
                                                    if(funs == item_pages.id){
                                                        item_chilld = funs_data[funs]
                                                    }
                                                }
                                                item_option.push({"allChoose":false,"name":item_pages.name,"id":item_pages.id,"pid":item_pages.pid,"type":item_pages.type,"child":item_chilld})
                                            }
                                            page_option = item_option
                                        }
                                    }
                                    self.activeNames.push(element.id)
                                    menu_option.push({"name":element.name,"id":element.id,"pid":element.pid,"type":element.type,"child":page_option})
                                })
                                self.data = menu_option
                            }else{
                                self.$notify({
                                    title: '提示',
                                    message:res.result.errorMsg
                                });
                            }
                        },
                        error: function() {
                        }
                    });
                },
                checkShow(id){
                    if(this.checkList.indexOf(id) == -1){
                        return false
                    }else{
                        return true
                    }                    
                },
                save(){
                    let self = this
                    let department = self.type
                    let position = self.position
                    let role_name = self.role_name
                    let roles_node = self.checkList.join(',')
                    if(!role_name){
                        self.$notify.error({
                            title: '提示',
                            message:'请选择角色名'
                        });
                        return false
                    }
                    this.companyId=self.company_id[self.company_id.length-1]
                    $.ajax({
                        headers: {'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                        url: '/role/role_operation',
                        type: 'post',
                        data: {
                            position:position,
                            rolename:role_name,
                            roles_node:roles_node,
                            company_id:self.companyId,
                            department:department
                        },
                        dataType: 'json',
                        success: function(res) {

                            if(res.result.success == true){
                                self.$notify({
                                    title: '提示',
                                    message:'添加成功'
                                });
                                setTimeout(() => {
                                   window.location.href="/distribute/role/indexpage"
                                }, 1000);
                            }else{
                                self.$notify({
                                    title: '提示',
                                    message:res.result.errorMsg
                                });
                            }
                        },
                    });
                }
            },
            mounted(){
                this.getNode()
                this.getCompanyList();
                this.roleName()
                this.getCompanyList();

            },
        })
        </script>
    </div>
  
@endsection